<template>
    <div :class="`order-goods-item ${mode}`">
        <div class="goods-pic">
            <img :src="imageSrc" alt="">
        </div>
        <div class="goods-detail">
            <div class="goods-name title-color">{{ itemInfo.prod_name }}</div>
            <div class="goods-sku">{{ itemInfo.sku_name }}</div>
        </div>
        <div class="goods-price-and-action">
            <div class="goods-price title-color">￥{{ itemInfo.trans / 100 }}</div>
            <div class="goods-count">x{{ itemInfo.quantity }}</div>
        </div>
    </div>
</template>

<script>
import { createShopImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'OrderGoodsItem', // 订单列表项
    mixins: [ModeMixin],
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
        isOnlyShow: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        imageSrc() {
            const { itemInfo } = this.$props;
            return createShopImageSrc(itemInfo.pic);
        },
    },
};
</script>

<style lang="less">
.order-goods-item {
    .flex();
    &.black {
        .goods-pic {
            border-color: rgba(125, 125, 131, 0.2);
        }
    }
    .goods-pic {
        width: 70px;
        height: 70px;
        border-radius: @border-radius;
        border: @border;
        .m-r(@shop-gap);
        > img {
            width: 100%;
            height: 100%;
        }
    }
    .goods-detail {
        flex: 1;
        .goods-name {
            font-size: @font-size;
            color: @text-color;
        }
        .goods-sku {
            font-size: @font-size-sm;
            color: @tip-color;
            opacity: .7;
            .m-t(@gap-sm);
        }
    }
    .goods-price-and-action {
        .t-r();
        .goods-price {
            font-size: @font-size;
            font-weight: 500;
            font-family: @font-family-number;
        }
        .goods-count {
            font-size: @font-size-sm;
            color: @tip-color;
            .m-t(@gap-sm);
        }
    }
}
</style>
